<template>
   <div>
      <div class="drag">
         <div class="bg"></div>
         <div class="text" onselectstart="return false;">请拖动滑块解锁</div>
         <div class="btn">&gt;&gt;</div>
      </div>
   </div>
</template>

<script>
   /* eslint-disable one-var */
   export default {
      name: 'VerifyingSlider',
      mounted() {
         this._initElement()
      },
      methods: {
         _initElement() {
            let self = this
            let $ = function (selector) {
                  return document.querySelector(selector)
               },
               box = $('.drag'), // 容器
               bg = $('.bg'), // 背景
               text = $('.text'), // 文字
               btn = $('.btn'), // 滑块
               success = false, // 是否通过验证的标志
               distance = box.offsetWidth - btn.offsetWidth // 滑动成功的宽度（距离）
            btn.style.left = 0 + 'px'
            bg.style.width = 0 + 'px'
            // 二、给滑块注册鼠标按下事件
            btn.onmousedown = function (e) {
               // 1.鼠标按下之前必须清除掉后面设置的过渡属性
               btn.style.transition = ''
               bg.style.transition = ''

               // 说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。

               // 2.当滑块位于初始位置时，得到鼠标按下时的水平位置
               var e = e || window.event
               var downX = e.clientX


               // 三、给文档注册鼠标移动事件
               document.onmousemove = function (e) {
                  var e = e || window.event
                  // 1.获取鼠标移动后的水平位置
                  var moveX = e.clientX

                  // 2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
                  var offsetX = moveX - downX

                  // 3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系
                  if (offsetX > distance) {
                     offsetX = distance// 如果滑过了终点，就将它停留在终点位置
                  } else if (offsetX < 0) {
                     offsetX = 0// 如果滑到了起点的左侧，就将它重置为起点位置
                  }

                  // 4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
                  btn.style.left = offsetX + 'px'
                  bg.style.width = offsetX + 'px'

                  // 如果鼠标的水平移动距离 = 滑动成功的宽度
                  if (offsetX === distance) {
                     // 1.设置滑动成功后的样式
                     text.innerHTML = '验证通过'
                     text.style.color = '#fff'
                     btn.innerHTML = '&radic;'
                     btn.style.color = 'green'
                     bg.style.backgroundColor = 'lightgreen'

                     // 2.设置滑动成功后的状态
                     success = true
                     // 成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
                     btn.onmousedown = null
                     document.onmousemove = null

                     // 3.成功解锁后的回调函数
                     setTimeout(() => {
                        self.$emit('slider')
                     }, 20)
                  }
               }

               // 四、给文档注册鼠标松开事件
               document.onmouseup = function (e) {
                  // 如果鼠标松开时，滑到了终点，则验证通过
                  if (success) {
                     return
                  } else {
                     // 反之，则将滑块复位（设置了1s的属性过渡效果）
                     btn.style.left = 0
                     bg.style.width = 0
                     btn.style.transition = 'left 1s ease'
                     bg.style.transition = 'width 1s ease'
                  }
                  // 只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
                  document.onmousemove = null
                  document.onmouseup = null
               }
            }
         },
         sussec() {
            console.log('产能')
         }
      }
   }
</script>

<style scoped lang="stylus">
   .drag {
      width: 300px;
      height: 40px;
      line-height: 40px;
      background-color: #e8e8e8;
      position: relative;
      margin: 0 auto;
   }

   .bg {
      width: 40px;
      height: 100%;
      position: absolute;
      background-color: #75CDF9;
   }

   .text {
      position: absolute;
      width: 100%;
      height: 100%;
      text-align: center;
      user-select: none;
   }

   .btn {
      width: 40px;
      height: 38px;
      position: absolute;
      border: 1px solid #ccc;
      cursor: move;
      font-family: "宋体";
      text-align: center;
      background-color: #fff;
      user-select: none;
      color: #666;
   }
</style>
